<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>

    <el-container direction="horizontal" >
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="2-2" open-index="2"  style="height: 100%"></sideBar>
      </el-aside>
      <el-main>
        <!--        <p>this is subcom page</p>-->
        <!--搜索栏-->
        <el-container direction="horizontal" >
          <el-input v-model="words.word" placeholder="请输入线路名字 （支持模糊查询）"></el-input>
          <el-button style="margin-left: 20px" @click="vague()">搜索</el-button>
          <el-button type="primary" style="margin-left: 16px;" @click="newretain()">添加</el-button>
        </el-container>

        <el-dialog
          title="新建线路"
          :visible.sync="dialogVisible"
          width="60%">

          <el-row>
            <el-col offset="3" :span="21">
          <el-form :label-position="left" label-width="80px" :inline="true"  class="demo-form-inline" size="small">
            <el-form-item label="线路编号">
              <el-input v-model="newlineinfo.line_id" placeholder="如：01"></el-input>
            </el-form-item>
            <el-form-item label="线路名称">
              <el-input v-model="newlineinfo.line_name" placeholder="线路名称"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-select v-model="newlineinfo.attr_depart_id" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
            </el-col>
          </el-row>

          <el-row>
            <el-col offset="3" :span="21">
            <template>
              <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入站点名称"
                v-model="newlineinfo.value"
                :data="data"
                :titles="['待选站点','已选站点']"
                targetOrder="noOriginal">
              </el-transfer>
            </template>
          </el-col>
          </el-row>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="newline()" size="small">确 定</el-button>
          </span>
        </el-dialog>

        <!--线路列表-->
        <div v-for="line in lineData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="margin-top: 15px">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height: 10px">
            <span>No.{{line.line_id}}</span>
            <span>所属部门：{{line.attr_depart_name}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="editretain(line)">编辑线路</el-button>
            <el-button style="float: right; padding: 3px 0" type="text" @click="handleDelete(line.line_id)">删除线路</el-button>

              <el-dialog
                title="修改线路"
                :visible.sync="dialogVisible2"
                width="60%">

                <el-row>
                  <el-col offset="3" :span="21">
                    <el-form :label-position="left" label-width="80px" :inline="true" class="demo-form-inline" size="small">
                      <el-form-item label="线路编号">
                        {{editlineinfo.line_id}}
                      </el-form-item>
                      <el-form-item label="线路名称">
                        <el-input v-model="editlineinfo.line_name" placeholder="线路名称"></el-input>
                      </el-form-item>
                      <el-form-item label="所属部门">
                        <el-select v-model="editlineinfo.attr_depart_id" clearable placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col offset="3" :span="21" style="margin-bottom: 15px">
                <template>
                  <el-radio v-model="add_order" label="unshift">向前加站</el-radio>
                  <el-radio v-model="add_order" label="push">向后加站</el-radio>
                </template>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col offset="3" :span="21">
                    <template>
                      <el-transfer
                        filterable
                        :filter-method="filterMethod"
                        filter-placeholder="请输入站点名称"
                        v-model="editlineinfo.value"
                        :data="data"
                        :titles="['待选站点','已选站点']"
                        :targetOrder="add_order">
                      </el-transfer>
                    </template>
                  </el-col>
                </el-row>

                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false" size="small">取 消</el-button>
            <el-button type="primary" @click="handleEdit()" size="small">确 定</el-button>
          </span>
              </el-dialog>

          </div>
          <div>
            <el-row>
              <el-col :span="2">
                {{line.line_name}}
              </el-col>
              <el-col :span="22">
                <el-steps :active="line.stations1.length" finish-status="info">
                  <el-step
                    v-for="station in line.stations1"
                    icon="el-icon-location-outline"
                    v-bind:description="station.station_name"
                    style="color: #4682B4"></el-step>
                </el-steps>
              </el-col>
            </el-row>
            <el-row>
              <el-col ><div class="verticalBar" style="background-color: #4682B4" ></div></el-col>
            </el-row>
            <el-row>
              <el-col offset="2" :span="22">
                <el-steps :active="line.stations2.length"  finish-status="info">
                  <el-step
                    v-for="station in line.stations2"
                    icon="el-icon-location-outline"
                    v-bind:description="station.station_name"
                    style="color: #4682B4"></el-step>
                </el-steps>
              </el-col>
            </el-row>
          </div>
        </el-card>

        </div>

        <!--分页-->
        <div style="text-align: center;margin-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pagesize"
            :total="total"
            @current-change="current_change">
          </el-pagination>
        </div>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
export default {
  components: {sideBar, navMenu},
  data() {

    return {
      // data:generateData(),
      data:[{'label': "label", 'key': "key", 'pinyin': "key", "disabled": false},],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },

      lineData: [],
      total: 0,
      pagesize: 3,
      currentPage: 1,
      st: 2,
      words: {
        word: ''
      },
      direction: 'rtl',
      options: [],
      newlineinfo: {
        line_id: '', line_name: '',attr_depart_id:'',value: []
      },
      line: {subcom_name: '', super_company_name: ''},
      editlineinfo: {
        line_id: '', line_name: '',attr_depart_id:'',value: [],direction:'1'
      },
      dialogVisible: false,
      dialogVisible2: false,
      add_order:"push"
    }
  },
  mounted() {
    this.$axios.get(`http://127.0.0.1:5000/line/init`).then((res) => {
      console.log(res);
      this.lineData = res.data;
      this.total = this.lineData.length;
    });
    // 获取所有站点
    this.$axios.get(`http://127.0.0.1:5000/line/options`).then((res) => {
      console.log(res);
      this.data=res.data;
    });
    // 获取可以选择的部门
    this.$axios.get(`http://127.0.0.1:5000/line/departoptions`).then((res) => {
      console.log(res.data);
      this.options=res.data;
    });
  },
  methods: {
    current_change: function(currentPage){
      this.currentPage = currentPage;
    },
    async vague() {
      this.$axios.post(`http://127.0.0.1:5000/line/select`, this.words).then((res) => {
        console.log(res);
        if(res.data==0){
          this.$message('没有符合查询条件的结果');
        }
        else {
          this.lineData = res.data;
          this.total = this.lineData.length;
        }
      });
    },
    handleDelete(line_id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onDelete(line_id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async onDelete(line_id) {
      console.log(line_id);
      this.$axios.post(`http://127.0.0.1:5000/line/delete`, line_id).then((res) => {
        console.log(res);
        this.st = res.data;
        if (this.st==1){
          this.$message('删除成功');
          window.location.reload();

        }
        else{
          this.$message('删除失败');
        }
        this.st = 2;
      });
    },
    newretain(){
      this.dialogVisible = true;

      //初始化
      for (var j=0;j<this.data.length;j++)
        this.data[j].disabled = false;
    },
    async newline() {
      if (this.newlineinfo.line_id== '')
        this.$message('请输入线路名称');
      else if (this.newlineinfo.line_name=='')
        this.$message('请输入线路名称');
      else if (this.newlineinfo.attr_depart_id=='')
        this.$message('请选择所属部门');
      else if (this.newlineinfo.value=='')
        this.$message('请选择经过站点');
      else
        this.$axios.post(`http://127.0.0.1:5000/line/newline`, this.newlineinfo).then((res) => {
          console.log(res);
          this.st = res.data;
          if (this.st==1) {
            this.$message('新增成功');
            this.dialogVisible = false
            window.location.reload();
          }
          else {
            this.$message('新增失败，线路已存在！');
          }
          this.st=2;
        });
    },
    editretain(line){
      this.dialogVisible2 = true;
      this.editlineinfo.line_id=line.line_id;
      this.editlineinfo.line_name=line.line_name;
      this.editlineinfo.attr_depart_id=line.attr_depart_id;
      this.editlineinfo.value=line.station_id_list;
      //let station;
      console.log("旧站点")
      console.log(this.editlineinfo.value);
      //初始化
      for (var j=0;j<this.data.length;j++)
          this.data[j].disabled = false;

      for (var i = 0 ; i < this.editlineinfo.value.length; i++)//对于该线路已存在的每一个站点
        for (var j=0;j<this.data.length;j++)//找到该站点，并将该站点disable
          if (this.data[j].key === this.editlineinfo.value[i]){
            this.data[j].disabled = true;
            console.log("change: "+this.data[j].key);
          }
      console.log(this.data);
    },
    handleEdit() {
      if (this.editlineinfo.line_name === '')
        this.$message('请输入线路名称1');
      else if (this.editlineinfo.attr_depart_id==='')
        this.$message('请选择所属部门2');
      else if (this.editlineinfo.value==='')
        this.$message('请选择经过站点3');
      else
        this.$axios.post(`http://127.0.0.1:5000/line/editline`, this.editlineinfo).then((res) => {
          console.log(res);
          this.st = res.data;
          if (this.st==1) {
            this.$message('修改成功');
            this.dialogVisible2=false;
            window.location.reload();
          }
          else{
            this.$message('修改失败！');
          }
          this.st.statu=2;
        });
    }
  }
}
</script>

<style>

.menu{
  width: 100%;
  float: left;
  height: 700px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  /*width: 480px;*/
}

.verticalBar {
  float: right;
  width: 2px;
  height: 20px;
  background: dodgerblue;
  display: inline-block;
  /*margin-top: 16px;*/
  /*vertical-align: top;*/
  margin-right: 20px;
  /*margin-left: 0;*/
}

</style>
